'use strict';

(function ($) {
    var Select = function(ele, options){
        this.ele = ele;
        this.options = options;
        this.$selectIcon = this.ele.find('i.select-icon');
        this.$dropdown = this.ele.find('div.select-dropdown');
        this.$options = this.$dropdown.find('ul.options');
        this.$inputWrap = this.ele.find('div.input-wrap');

    }

    Select.prototype.init= function(){
        // 初始化数据
        var options = this.options.option;
        if(options && options.length > 0){
            this.$options.html('');
          for (var i = 0; i < options.length; i++){
              this.$options.append('<li data-value="'+  options[i].value +'" data-checked="false">'+ options[i].label +'</li>');
          }

        }
        this.bindEvent();
    }

    Select.prototype.bindEvent = function(){
        var that = this;
        this.$options.find('li').on('click',function () {
            var $li = $(this);
            var checked = $li.attr('data-checked');

            if ((!checked || checked === 'false') && !$li.hasClass('disable')) {
                $li.attr('data-checked',true);
                $li.append('<i class="fa fa-check pull-right" aria-hidden="true"></i>');

            }else{
                $li.attr('data-checked',false);
                $li.find('i').remove();
            }
            that.setChecked();
        });

        $(document).click(function (e) {
            var eleID  = that.ele.attr('id');
            var eventID = $(e.target).parents('#' + eleID).attr('id');

            if (eventID === eleID){
                if(that.$selectIcon.attr('style').indexOf('rotate(180deg)') < 0){
                    that.$selectIcon.css({'transform' : 'rotate(180deg)'});
                    that.$dropdown.show();
                    return false;
                }else {
                    if ($(e.target).parent('ul.options').length > 0){
                        return false;
                    }
                }
            }

            that.$selectIcon.css({'transform' : 'rotate(0deg)'});
            that.$dropdown.hide();
        });
    }


    Select.prototype.setChecked = function(){
        var checkedArr = this.$options.find('li[data-checked="true"]');
        if (checkedArr.length >= this.options.max) {
            this.$options.find('li[data-checked="false"]').addClass('disable');
        }else{
            this.$options.find('li[data-checked="false"]').removeClass('disable');
        }
        var checkedText = '';
        var checkedList = [];


        for (var i = 0; i < checkedArr.length; i++){
            checkedText += checkedArr[i].innerText + ',';
            checkedList.push({ label: checkedArr.eq(i).text(), value: checkedArr.eq(i).data('value') });
        }

        if (checkedText === ''){
            this.$inputWrap.removeAttr('style');
            this.$inputWrap.text(this.options.placeholder);
            this.options['onChange']([]);
        } else{
            this.$inputWrap.css({'color':'#555'});
            this.$inputWrap.text(checkedText.substring(0,checkedText.length - 1));

            if (this.options['onChange']) {
                this.options['onChange'](checkedList);
            }

        }
    }

    $.fn.bindSelect = function (options) {
        this.addClass('select-wrap');
        this.append('<i class="fa fa-chevron-down select-icon" style=""></i>');
        this.append('<div class="input-wrap">'+ options.placeholder +'</div>');
        this.append('<div class="select-dropdown"><ul class="options"></ul></div>');
        var select = new Select(this, options);
        select.init();
    }

    $.fn.setSelectValue = function (value) {
        this.find('li[data-value="'+ value +'"]').click();
        this.find('div.select-dropdown').hide();
        this.find('i.select-icon').css({'transform' : 'rotate(0deg)'});
    }
})(jQuery);